<%--
  Created by IntelliJ IDEA.
  User: HY
  Date: 2021/11/9
  Time: 12:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入vue和axios--%>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/js/axios-0.18.0.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="app">
    <%--数据双向绑定--%>
    姓名：<input type="text" v-model="user.username">
    性别：<input type="text" v-model="user.sex">
    <%--绑定事件--%>
    <button @click="select()">查询</button>
    <button @click="deleteUser()">删除</button>
    <button @click="selectById()">根据id查询</button>
    <button @click="save()">保存User</button>
    <button @click="postUpadte()">修改</button>
    <button @click="selectByTiaoJian()">根据条件查询</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            user: {},
        },
        methods: {
            select(){
                //axios发送异步请求，注意必须是post，
                //因为@RequestBody要从请求体中获取参数,get请求没有请求体
                axios.post("/json",this.user).then(resp => {
                    console.log("响应结果")
                    console.log(resp.data);
                })
            },
            deleteUser(){
                let id = 4;
                axios.delete("/user/"+id).then(resp=>{
                    console.log(resp.data)
                    if(resp.data == "ok"){
                        alert("删除成功")
                    }
                })
            },
            selectById(){
                let id = 3;
                axios.get("/user/"+id).then(resp=>{
                    if (resp.data != null){
                    this.user = resp.data
                    }else{
                        alert("异常")
                    }
                })
            },
            save(){
                axios.post("/user",this.user).then(resp=>{
                    if (resp.data == "ok"){
                       alert(resp.data)
                    }
                })
            },
            postUpadte(){
                axios.post("/user",this.user).then(resp=>{
                    if (resp.data == "ok"){
                        alert(resp.data)
                    }
                })
            },
            selectByTiaoJian(){
                axios.get("/user/3/sex/timi").then(resp=>{
                    if (resp.data != null){
                       this.user = resp.data
                    }
                })
            },

        }
    })
</script>